<?php echo $header; ?>
<div class="alert-wrap">
    <div class="alert-star alert-position alert-fixed">
    </div>
</div>
<div class="container in-wrap">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <h1 class="text-center"><?php echo $maincontent; ?></h1>
            <h4 class="text-center"><?php echo $total; ?></h4>
            <h4 class="text-center"><?php echo $page; ?></h4>
        </div>
    </div>
    <form class="form-horizontal" id="k-v-form">
        <div class="form-group from-margin-top">
            <label for="" class="control-label col-md-2 col-md-offset-1">名称</label>
            <div class="col-md-6">
                <input type="text" name="k-v-name" id="k-v-name" class="form-control" placeholder="知识点名称">
            </div>
        </div>
        <div class="form-group from-margin-top">
            <label for="" class="control-label col-md-2 col-md-offset-1">标签</label>
            <div class="col-md-6">
                <input type="text" name="k-v-label" id="k-v-label" class="form-control" placeholder="每次只能查询一个标签">
            </div>
        </div>
        <div class="form-group from-margin-top">
            <label for="" class="control-label col-md-2 col-md-offset-1">完成度</label>
            <div class="col-md-6">
                <select class="form-control" id="view-complate-star">
                    <option selected="ture"></option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </div>
        <div class="form-group from-margin-top">
            <label for="" class="control-label col-md-2 col-md-offset-1">复习次数</label>
            <div class="col-md-6">
                <select class="form-control" id="view-review-times">
                    <option selected="ture"></option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                </select>
            </div>
        </div>
        <div class="form-group has-feedback from-margin-top container-start">
            <label for="" class="control-label col-md-2 col-md-offset-1">起始时间</label>
            <div class="col-md-6 date datetp start-todaydatetime">
                <input type="text" name="k-v-start-time" id="k-v-start-time" class="form-control cursor-not-allowed" placeholder="HH:MM:SS" readonly="">
                <div class="pull-right datetp-fix">
                    <span class="glyphicon glyphicon-calendar form-control-feedback little-icon"></span>
                    <span class="glyphicon glyphicon-remove form-control-feedback little-icon little-icon-remove"></span>
                </div>
            </div>
        </div>
        <div class="form-group has-feedback from-margin-top container-end">
            <label for="" class="control-label col-md-2 col-md-offset-1">截至时间</label>
            <div class="col-md-6 date datetp end-todaydatetime">
                <input type="text" name="k-v-end-time" id="k-v-end-time" class="form-control cursor-not-allowed" placeholder="HH:MM:SS" readonly="">
                <div class="pull-right datetp-fix">
                    <span class="glyphicon glyphicon-calendar form-control-feedback little-icon"></span>
                    <span class="glyphicon glyphicon-remove form-control-feedback little-icon little-icon-remove"></span>
                </div>
            </div>
        </div>
        <div class="form-group from-margin-top">
            <div class="col-md-6 col-md-offset-4 col-sm-6 col-sm-offset-3">
                <a href="javascript:void(0);" class="btn btn-primary create-btn" id="v-l-search">
	     					搜索
	     				</a>
                <button type="reset" class="btn btn-primary create-btn">重置</button>
            </div>
        </div>
    </form>
    <div class="table-responsive">
        <table class="table table-bordered table-hover table-viewreminder">
            <tr class="warning t-header-viewreminder">
                <th id="view-resort-kname" data-order="ASC">知识点名称<span class="glyphicon glyphicon-minus little-icon" aria-hidden="true"></span></th>
                <th id="view-resort-reviewtimes" data-order="ASC">复习次数<span class="glyphicon glyphicon-minus little-icon" aria-hidden="true"></th>
					<th id="view-resort-date" data-order="ASC">复习时间<span class="glyphicon glyphicon-minus little-icon" aria-hidden="true"></span></th>
                <th>知识点详情</th>
                <th id="view-resort-complate" data-order="ASC">完成度<span class="glyphicon glyphicon-minus little-icon" aria-hidden="true"></span></th>
            </tr>
            <!-- <tr>
					<td>bootstrap辅助类和响应式工具</td>
					<td>第二次</td>
					<td>2016年12月11日21:48:22</td>
					<td><span class="glyphicon glyphicon-list-alt icon-green little-icon view-detail-icon" aria-hidden="true"></td>
					<td>
						<span class="glyphicon glyphicon-star-empty star little-icon" aria-hidden="true"></span>
						<span class="glyphicon glyphicon-star-empty star little-icon" aria-hidden="true"></span>
						<span class="glyphicon glyphicon-star-empty star little-icon" aria-hidden="true"></span>
						<span class="glyphicon glyphicon-star-empty star little-icon" aria-hidden="true"></span>
						<span class="glyphicon glyphicon-star-empty star little-icon" aria-hidden="true"></span>
					</td>
				</tr> -->
            <tr>
                <td colspan="5" class="td-loading">
                    <img src="admin\view\image\loading\sixnew.gif" class="img-responsive img-center" alt="Responsive image">
                </td>
            </tr>
            <?php if ($knowledges) { ?>
                <?php foreach($knowledges as $knowledge) { ?>

            <tr class="view-tr tr-all">
                <td>
                    <?php echo $knowledge['kname']; ?>
                </td>
                <td>第
                    <?php echo $knowledge['times']; ?>次</td>
                <td>
                    <?php echo $knowledge['date']; ?>
                </td>
                <td><span class="glyphicon glyphicon-list-alt icon-green little-icon view-detail-icon" aria-hidden="true" data-detail="<?php echo $knowledge['kdetail']; ?>" data-kname="<?php echo $knowledge['kname']; ?>"></td>
							<td class="star-td-c star-td-<?php echo $knowledge['cid']; ?>" data-cid="<?php echo $knowledge['cid']; ?>" data-kname="<?php echo $knowledge['kname']; ?>" data-times="<?php echo $knowledge['times']; ?>">
								<?php if ((int)$knowledge['star'] === 0 ) { ?>
									<span class="glyphicon glyphicon-star-empty star little-icon" aria-hidden="true"></span>
                    <span class="glyphicon glyphicon-star-empty star little-icon" aria-hidden="true"></span>
                    <span class="glyphicon glyphicon-star-empty star little-icon" aria-hidden="true"></span>
                    <span class="glyphicon glyphicon-star-empty star little-icon" aria-hidden="true"></span>
                    <span class="glyphicon glyphicon-star-empty star little-icon" aria-hidden="true"></span>
                    <?php }else{ ?>
                    <?php for ($i=0; $i < (int)$knowledge['star']; $i++) { ?>
                    <span class="glyphicon glyphicon-star icon-margin" aria-hidden="true"></span>
                    <?php } ?>
                    <?php } ?>
                </td>
            </tr>
            <?php } ?>
            <?php } ?>
        </table>
    </div>
    <div class="nav" aria-label="Page navigation">
        <div class="center-wrap">
            <div class="center-inner pagination-html">
                <?php echo $pagination; ?>
            </div>
        </div>
    </div>
</div>
<!-- 知识点详情模态框 -->
<div class="modal fade" id="view-detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="alert alert-warning text-center v-alert-detail">
                </div>
                <h4 class="modal-title" id="view-detail-title">知识点标题</h4>
            </div>
            <div class="modal-body">
                <p class="text-center detail-content">知识点内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<?php echo $footerin; ?>
<script>
$(function() {
    var $alerttarget = $(".alert-star");
    var $view_resort_kname = $("#view-resort-kname");
    var $view_resort_date = $("#view-resort-date");
    var $view_resort_complate = $("#view-resort-complate");
    var cid;
    //时间选择插件
    $(".start-todaydatetime").datetimepicker({
        format: 'hh:ii:ss',
        container: $(".container-start"),
        startView: 0
    });
    $(".end-todaydatetime").datetimepicker({
        format: 'hh:ii:ss',
        container: $(".container-end"),
        startView: 0
    });
    //搜索加载
    //名称验证
    $("#k-v-name").on("blur", function() {
        var e;
        var kname = $(this).val();
        if (e = kname_vel(kname, 1)) {
            alert2000($alerttarget, e);
            return false;
        };
    });
    //标签验证
    $("#k-v-label").on("blur", function() {
        var e;
        var klabel = $(this).val();
        if (e = klabel_vel(klabel, 1)) {
            alert2000($alerttarget, e);
            return false;
        }
    });
    //点击搜索
    $("#v-l-search").click(function() {
            if (getArgsForView($alerttarget)) {
                var args = getArgsForView($alerttarget);
            };
            getDataForView($alerttarget, args);
        })
        //星星选择
    $(document).on("mouseover", ".star", function() {
        cid = $(this).closest("td").data("cid");
        var indexl = $(this).index();
        //alert(indexl);
        indexl++;
        $(".star-td-" + cid + " .star:lt(" + indexl + ")").removeClass("glyphicon-star-empty").addClass("glyphicon-star");
    });
    $(document).on("mouseout", ".star", function() {
        var index = $(this).index();
        if (index != 0) {
            index--;
        } else {
            $(".star-td-" + cid + " .star:eq(" + index + ")").removeClass("glyphicon-star").addClass("glyphicon-star-empty");
        }
        $(".star-td-" + cid + " .star:gt(" + index + ")").removeClass("glyphicon-star").addClass("glyphicon-star-empty");

    });
    //选星
    $(document).on("click", ".star", function() {
            cid = $(this).closest("td").data("cid");
            var index = $(this).index();
            var kname = $(this).closest("td").data("kname");
            var times = $(this).closest("td").data("times")
            $(".star-td-" + cid + " .star:gt(" + index + ")").remove();
            $(".star-td-" + cid + " .star:lt(" + index + ")").removeClass("star little-icon").addClass("icon-margin");
            $(this).removeClass("star");
            index++;
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "<?php echo $selectstarurl; ?>",
                data: {
                    cid: cid,
                    star: index
                },
                beforeSend: function() {
                    var idinfo = '正在查询数据请稍后……';
                    alertjts($alerttarget, idinfo);
                },
                success: function(data) {
                    if (data == 1) {
                        var info = "您已将知识点:" + kname + "<br>的第" + times + "次复习的完成度修改为:<br>" + index + "星！";
                        alertjts($alerttarget, info);
                    }
                }
            })
        })
        //离开复原星
    $(document).on("mouseout", ".star-td-c", function() {
        $(this).children(".star").removeClass("glyphicon-star").addClass("glyphicon-star-empty");
    });
    //重新排序
    (function() {
        //按照时间排序
        var $timestarget = $("#view-resort-date");
        orderByField($timestarget, "date", $alerttarget, 2);
        //按照名称排序
        var $knametarget = $("#view-resort-kname");
        orderByField($knametarget, "kname", $alerttarget, 2);
        //按照完成度排序
        var $complatetarget = $("#view-resort-complate");
        orderByField($complatetarget, "star", $alerttarget, 2);
        //按照完成度排序
        var $reviewtarget = $("#view-resort-reviewtimes");
        orderByField($reviewtarget, "times", $alerttarget, 2);
    }());

    //知识点详情弹出模态框
    $(document).on("click", ".view-detail-icon", function() {
        var detail = $(this).data("detail");
        var kname = $(this).data("kname");
        $(".detail-content").html(detail);
        $("#view-detail-title").html(kname);
        $("#view-detail").modal();

    });
});
</script>
</body>

</html>
